<template>
  <view class="content">
    <view class="list">
      <view class="tishi">修改密码</view>
      <view class="list-call">
        <image class="img" src="/static/shilu-login/1.png"></image>
        <input class="sl-input" type="text" v-model="oldPassword" maxlength="11" placeholder="请输入旧密码" />
      </view>
      <view class="list-call">
        <image class="img" src="/static/shilu-login/2.png"></image>
        <input class="sl-input" v-model="newPassword" maxlength="32" placeholder="请输入新密码" :type="showPassword ? 'text' : 'password'" />
        <image class="img" :src="showPassword?'/static/shilu-login/op.png':'/static/shilu-login/cl.png'" @click="display"></image>
      </view>
    </view>
    <view class="button-login" hover-class="button-hover" @tap="bindLogin()">
      <text>修改密码</text>
    </view>

  </view>
</template>

<script>
  var _this, js;
  export default {
    data() {
      return {
        oldPassword: '',
        second: 0,
        showPassword: false,
		userId: '',
        password: '',
		newPassword:'',
		user:{}
      }
    },
    onLoad() {
      _this = this;
	  uni.getStorage({
	  	key : 'user',
	  	success: res=>{
	  		// console.log(res.data.password);
	  		// this.password=res.data.password,
			_this.userId=res.data.userId
	  	}
	  })
    },

    onUnload() {
      this.clear()
    },
    methods: {
      display() {
        this.showPassword = !this.showPassword
      },
      clear(){
        clearInterval(js)
        js = null
        this.second = 0
      },
      bindLogin() {
        // if (this.oldPassword != this.password) {
        //   uni.showToast({
        //     icon: 'none',
        //     title: '原密码不正确'
        //   });
        //   return;
        // }
        
        uni.request({
          url: 'http://8.130.170.106:9999/user/updPassword/',
          data: {
			userId: this.userId,
            oldPwd: this.oldPassword,
            newPwd: this.newPassword
          },
          // method: 'POST',
          // dataType: 'json',
          success: (res) => {
            if (res.data) {
              uni.showToast({
                title: '修改成功',
              });
			  uni.getStorage({
			  	key : 'user',
			  	success: res=>{
			  		// console.log(res.data.password);
			  		this.user=res.data
			  	}
			  });
			  uni.removeStorage({
			      key: 'user',
			      success: function () {
			          console.log('删除成功')
			      }
			  });
			  uni.setStorage({
			  	key:'user',
			  	data: this.user,
			  	success() {
			  		// console.log(res.data)
			  	}
			  })
			  uni.switchTab({
				url:'/pages/main/tabbar/uni-center/uni-center'
			  })
            } else {
              uni.showToast({
                title: '修改失败'
              });
              setTimeout(function() {
                uni.navigateBack();
              }, 1500)
            }
          }
        });

      }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .tishi {
    color: #999999;
    font-size: 28rpx;
    line-height: 50rpx;
    margin-bottom: 50rpx;
  }

  .list {
    display: flex;
    flex-direction: column;
    padding-top: 50rpx;
    padding-left: 70rpx;
    padding-right: 70rpx;
  }

  .list-call {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    color: #333333;
    border-bottom: 0.5px solid #e2e2e2;
  }

  .list-call .img {
    width: 40rpx;
    height: 40rpx;
  }

  .list-call .sl-input {
    flex: 1;
    text-align: left;
    font-size: 32rpx;
    margin-left: 16rpx;
  }

  .button-login {
    color: #FFFFFF;
    font-size: 34rpx;
    width: 470rpx;
    height: 100rpx;
    background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
    box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
    border-radius: 50rpx;
    line-height: 100rpx;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100rpx;
  }

  .button-hover {
    background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
  }

  .yzm {
    color: #FF7D13;
    font-size: 24rpx;
    line-height: 64rpx;
    padding-left: 10rpx;
    padding-right: 10rpx;
    width: auto;
    height: 64rpx;
    border: 1rpx solid rgba(255, 131, 30, 1);
    border-radius: 50rpx;
  }

  .yzms {
    color: #999999 !important;
    border: 1rpx solid #999999;
  }
</style>
